<template>
  <!-- 课程管理 -->
  <div class="container-course">
    <!-- 筛选 --- 导出 -->
    <el-form :inline="true" :model="formScreen" class="demo-form-inline">
      <!-- <el-form-item>
        <el-select
          v-model="formScreen.project"
          clearable
          placeholder="选择项目"
          @change="selectProject">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-select
          v-model="formScreen.gradeIds"
          clearable
          placeholder="选择班级"
          @change="selectGradeId"
        >
          <el-option
            v-for="item in gradeIds"
            :key="item.id"
            :label="item.dictValue"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="formScreen.sex"
          clearable
          placeholder="选择性别"
          @change="selectSex"
        >
          <el-option
            v-for="item in sexs"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button>导出列表</el-button>
      </el-form-item>
    </el-form>
    <!-- 分割 -->
    <el-divider></el-divider>
    <!-- 列表 -->
    <div class="content">
      <!-- 内容头部 -->
      <div class="conHeader">
        <div>
          当前结果：<span>总击 {{ total }} 条记录</span>
        </div>
        <el-select v-model="custom" class="zidingyi" placeholder="自定义显示列">
          <!-- <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option> -->
        </el-select>
      </div>
      <!-- 内容主体 -->
      <div class="conBody">
        <!-- 多选列表 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          v-loading="loading"
        >
          <el-table-column type="selection" width="45"> </el-table-column>
          <el-table-column width="130">
            <template slot-scope="scope">
              <el-image
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                :key="scope.row.id"
                class="cover-image"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="courseName" label="项目" width="120">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="120">
            <template slot-scope="scope">{{
              scope.row.sex === 1 ? "男" : "女"
            }}</template>
          </el-table-column>
          <el-table-column prop="courseDesc" label="课程介绍">
          </el-table-column>
          <el-table-column prop="gradeIds" label="使用年级"> </el-table-column>
          <el-table-column prop="courseType" label="类型"> </el-table-column>
          <el-table-column prop="state" label="未达标禁选"> </el-table-column>
          <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
              <el-select
                v-model="operVal"
                @change="changeVal(scope.row.courseId)"
                placeholder="操作"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 课程新增 -->
    <div class="add_icon" @click="addCourse">
      <img src="../../../static/img/icon_hdglfbhd@2x.png" alt="" />
    </div>
  </div>
</template>

<script>
import { getTchCourseInfoTable, delCourse, getAllGardas } from '@/api/index'
export default {
  name: 'course-sup',
  data() {
    return {
      // 总条数
      total: 0,
      // 每页多少条
      pageSize: 8,
      //页码
      page: 0,
      offset: 0,
      // 数据加载时
      loading: true,
      custom: '',
      formScreen: {
        // project: '',
        gradeIds: null,
        sex: null
      },
      gradeIds: [],
      sexs: [{ // 性别
        value: 1,
        label: '男'
      }, {
        value: 2,
        label: '女'
      }],
      tableData: [{
        courseName: '跳远',
        sex: '女',
        courseDesc: '666',
        gradeIds: '1年级',
        courseType: '运动',
        state: '0',

      }],
      options: [{
        value: '1',
        label: '删除'
      }, {
        value: '2',
        label: '修改'
      }],
      // operVal
      operVal: ''
    }
  },
  created() {
    this.getGarda()
    this.onLoad()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    changeVal(id) {
      console.log('11111111', this.$store.state.common.mainTabs);
      if (this.operVal == '2') {
        this.$router.push({ path: 'dealer', query: { type: 1 } })
        console.log('修改', id);
        this.operVal = ''
      } else if (this.operVal == '1') {
        this.$confirm('此操作将删除该作业, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delCourse(id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        this.operVal = ''
      }
    },
    // 教师-首页课程列表
    async onLoad() {
      const queryParam = this.formScreen
      const newParam = { ...queryParam, ...JSON.parse(sessionStorage.getItem('userMsg')) }
      console.log(newParam);
      const res = await getTchCourseInfoTable({
        "sort": true,
        "offset": this.offset,
        "pageSize": this.pageSize,
        "queryParam": newParam
      })
      console.log('课程管理-首页列表', res);
      if (res.status === 200) {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.loading = false
      }
    },
    async getGarda() {
      const res = await getAllGardas()
      console.log('年级:', res);
      this.gradeIds = res.data.data
    },
    // 选择下拉框时触发的回调函数
    // selectProject (proVal) {
    //   this.projectValue = proVal
    //   this.onLoad()
    // },
    selectGradeId(gradeIdVal) {
      this.gradeId = gradeIdVal
      this.onLoad()
    },
    selectSex(sexVal) {
      this.formScreen.sex = sexVal
      this.onLoad()
    },
    // 新增课程
    addCourse() {
      this.$router.push({ path: 'dealer', query: { type: 0 } })
    },
    // 删除课程
    delCourse(id) {
      this.$http({
        url: this.$http.adornUrl(`delCourse/` + id),
        method: 'POST',
      }).then(res => {
        console.log('删除课程', res);
        setTimeout(() => {
          if (res.data.errorCode == 0) {
            this.onLoad()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        }, 100)
      })
    },
    // 分页函数
    changePage(newPage) {
      this.page = newPage; //页码
      console.log(newPage);
      this.offset = this.pageSize * (newPage - 1);
      this.onLoad()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-button {
  padding: 0;
}
.zidingyi {
  /deep/ .el-input__inner,
  /deep/.el-input .el-input__count .el-input__count-inner {
    background-color: #f7fbfc;
    line-height: 0.2188rem;
    width: 0.9396rem !important;
    border-radius: 0.0521rem;
  }
  /deep/.el-input--medium .el-input__icon {
    line-height: 0.1875rem;
  }
}
/deep/.el-table th {
  font-size: 0.0938rem;
}
.container-course {
  padding: 0.1667rem 0.151rem;
  position: relative;
  background-color: #fff;
  border-radius: 0.0781rem;
  // 筛选搜索
  .el-form {
    margin-bottom: 0;
    height: 0.2188rem;
    .el-form-item:last-child {
      position: absolute;
      right: 0.0938rem;
      .el-button {
        width: 0.7396rem;
        height: 0.2188rem;
        background: #0fdd8d;
        border-radius: 0.0521rem;
        font-size: 0.0833rem;
        font-weight: 500;
        color: #ffffff;
        line-height: 1;
      }
    }
    /deep/.el-input--medium .el-input__inner,
    .el-input--suffix .el-input__inner,
    .el-select .el-input__inner {
      background-color: #f7fbfc;
      height: 0.2188rem;
      width: 0.7396rem;
      border-radius: 0.0521rem;
    }
    /deep/.el-input--medium .el-input__icon {
      line-height: 0.2344rem;
    }
  }
  // 分割线
  .el-divider {
    background-color: #d8f9ed;
  }
  // 内容区
  .content {
    margin: 0 0 80px;
    .conHeader {
      display: flex;
      justify-content: space-between;
      line-height: 0.1875rem;
      font-size: 0.0729rem;
      margin-bottom: 0.0781rem;
      div {
        color: #525252;
        span {
          color: #888888;
        }
      }
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        background-color: #f7fbfc;
        height: 0.1875rem;
        width: 0.7031rem;
        border-radius: 0.0521rem;
      }
    }
    .conBody {
      .el-table {
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          width: 0.4479rem;
          height: 0.1875rem;
          background: #f8f8f8;
          border-radius: 0.0938rem;
          padding: 0 0.1042rem 0 0.1302rem;
          color: #888888;
        }
        /deep/.el-input__suffix {
          display: none;
        }
        .el-image {
          width: 0.5208rem;
          height: 0.2604rem;
        }
      }
    }
  }
  // 课程新增
  .add {
    position: fixed;
    right: 2%;
    bottom: 2%;
  }
}
</style>
